<template>
  <div class="works">
    <div class="content">
      <h1>个人作品展</h1>
      <ul>
        <li class="first item">
          <img src="../assets/images/1.jpg" class="img"  alt="">
          <a href="http://www.baidu.com">
            <div class="work">
                <p>这是第一个作品</p>
                <span>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                </span>
            </div>
          </a>
        </li>
        <li class="item">
          <img src="../assets/images/2.jpg" alt="" class="img">
          <a href="http://www.baidu.com">
            <div class="work">
                <p>这是第二个作品</p>
                <span>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                </span>
            </div>
          </a>
        </li>
        <li class="item">
          <img src="../assets/images/3.jpg" alt="" class="img">
          <a href="http://www.baidu.com">
            <div class="work">
                <p>这是第三个作品</p>
                <span>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                </span>
            </div>
          </a>
        </li>
      </ul>
      <ul>
        <li class="first item">
          <img src="../assets/images/4.jpg" alt="" class="img">
          <a href="http://www.baidu.com">
            <div class="work">
                <p>这是第四个作品</p>
                <span>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                </span>
            </div>
          </a>
        </li>
        <li class="item">
          <img src="../assets/images/5.jpg" alt="" class="img">
          <a href="http://www.baidu.com">
            <div class="work">
                <p>这是第五个作品</p>
                <span>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                  这是作品介绍<br/>
                </span>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <a href="http://www.jianshu.com/u/811414dd736e">了解更多。。。</a>
  </div>
</template>

<script>
// var aa = document.getElementById('aa')
// console.log(aa)
export default {
  data () {
    return {}
  },
  mounted () {
    var lis = document.querySelectorAll('.item')
    const imgs = document.querySelectorAll('.img')
    const work = document.querySelectorAll('.work')
    for (var i = 0, l = lis.length; i < l; i++) {
      imgs[i].style.transition = 'all .5s'
      work[i].style.transition = 'top .5s'
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .works {
    height: 100%;
    background: #d7ebe9;
    border: 1px solid transparent;
    .content {
      margin-top: 180px;
      h1 {
        font-size: 36px;
        margin-bottom: 60px;
      }
      ul {
        width: 80%;
        overflow: hidden;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        li {
          width: 300px;
          height: 200px;
          background: red;
          margin-bottom: 30px;
          border-radius: 10px;
          font-size: 0;
          position: relative;
          overflow: hidden;
          margin-left: 10px;
          &.first {
            margin-left: 0;
          }
          img {
            width: 100%;
            height: 100%;
          }
          &:hover {
              a {
                .work {
                  transition: top .5s;
                  top: 0;
                }
              }
              img {
                transition: all .5s;
                transform: scale(2);
              }
          }
          a {
            .work {
              width: 100%;
              height: 100%;
              background: rgba(0,0,0,0.5);
              text-align: left;
              font-size: 16px;
              position:absolute;
              color: #fff;
              top: 160px;
              left: 0;
              padding-left: 15px;
              p {
                height: 40px;
                font-size: 25px;
                line-height: 40px;
                
              }
            }
          }
        }
      }

    }
    a {
      display: inline-block;
      height: 50px;
      width: 150px;
      background: rgba(0,0,0,0.5);
      line-height: 50px;
      color: #fff;
      font-size: 17px;
      border-radius: 25px;
      margin-top: 75px;
      &:hover {
        background: rgba(0,0,0,0.3);
      }
    }
  }
</style>
